<template>
	<view class="container">

    <u-modal :show="show"  :title="title" :closeOnClickOverlay="true" @close="close" @confirm="confirm" @cancel="cancel" ref="uModal" :showCancelButton="true" :confirm-text="confirmText" :cancel-text="cancelText" :asyncClose="true" >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>

		<view class="wrapper">
      <!-- 未登录状态 -->
      <view class="not-login" v-if="!isLogin">
        <view class="login-item" @click="toLogin">
          <view class="avatar-box">
            <image class="default-avatar" :src="imguser+'/minis/my/default-avatar.png'" mode=""></image>
          </view>
          <view class="login-text">登录/注册</view>
          <view class="arrow">></view>
        </view>
      </view>

      <!-- 已登录状态 -->
      <block v-else>
        <view class="userInfo disb aic">
          <image class="userPic" :src="user.avatar" mode=""></image>
          <view class="userMess disc jsa">
            <view class="nicknames">{{user.nickname}}</view>
            <view class="nicknames fz12 color6" v-if="user.id==undefined">用户ID：</view>
            <view class="nicknames fz12 color6" v-if="user.id!=undefined">用户ID：{{user.id}}</view>
          </view>
          <view  class="right" v-if="user.userType==2 || user.userType==3">
            <view class="f1"  @click="toConfirm(7)">
              切换角色
            </view>
            <view class="f2" @click="toConfirm(0)">
             个人资料
            </view>
          </view>
          <view class="right tac fz14" v-if="user.userType==1 || user.userType==5" @click="toConfirm(0)">个人资料></view>
        </view>

        <view class="menu menu2 disb aic" @click="toConfirm(2)" v-if="financeFlag">
          <view class="">财富值</view>
          <image class="icon" :src="imguser+'/minis/my/caifuzhi.png'" mode=""></image>
        </view>
        <view class="menu menu5 disb aic" @click="toConfirm(5)">
          <view class="">我的消息</view>
          <view>
            <view><text class="number" v-if="number>0">{{number}}</text></view>
            <image class="icon" :src="imguser+'/minis/my/msg.png'" mode=""></image>
          </view>
        </view>
        <view class="menu menu1 disb aic" @click="toConfirm(1)"  v-if="user.userType==1 || user.userType==5 && financeFlag">
          <view class="">咨询进度</view>
          <image class="icon" :src="imguser+'/minis/my/daikuanjindu.png'" mode=""></image>
        </view>
        <view class="menu menu3 disb aic" @click="toConfirm(3)" v-if="financeFlag">
          <view class="">平台推荐人</view>
          <image class="icon" :src="imguser+'/minis/my/tuijianren.png'" mode=""></image>
        </view>
      </block>
		</view>
		<tabbar :current="3" :tabBarList="tabBerLists"></tabbar>
	</view>
</template>

<script>
  import {messageNoReadNumber} from "../../api/index.js"
	import {modify,getUserInfo} from "../../api/setting.js"
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/common/config'
  import tabBar from "@/utils/tabbar"
  import {getCheck} from '../../api/login.js'
  import UText from "../../uni_modules/uview-ui/components/u-text/u-text.vue";
export default {
	components: {
    UText,
		  tabbar
	},
	data() {
		return {
      isLogin: false,
      number:'',
      show: false,
      title: '切换角色',
      confirmText:'',
      cancelText:'普通用户',
			tabBerLists:[],
      financeFlag: false,
			user:{},
			imguser:config.baseImgUrl
		}
	},
	onShow() {
    // 检查登录状态
    const token = uni.getStorageSync('token')
    this.isLogin = !!token
    
    if (this.isLogin) {
      this.getMessage()
      this.getLoadData()
      this.getMsgNumber()
    }
		this.tabBerLists = uni.getStorageSync('tabBarList') // 自定义的tabbar赋值
	},
  onLaunch(){
    this.getLoadData()
  },
	methods: {
    // 跳转到登录页
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/mobile'
      })
    },
    getLoadData() {
      if (!this.isLogin) return
      getCheck().then(res => {
        this.userType = uni.getStorageSync('userInfo').userType
        if (this.userType==2){
          this.confirmText ='业务员'
        }else if (this.userType==3){
          this.confirmText ='权证员'
        }
        this.financeFlag = res.data
      })
    },
		// 获取用户信息
		getMessage(){
			getUserInfo().then(res => {
				this.user = res.data
			})
		},
    getMsgNumber(){
      messageNoReadNumber().then(res => {
        this.number = res.data
      })
    },
		toConfirm(i){
			if(i==0){
				uni.navigateTo({
					url:"/pages/setting/setting"
				}) 
			}
			if(i==1){
				uni.navigateTo({
					url:"/pages/order/confirm"
				})
			}
			if(i==2){
				uni.navigateTo({
					url:"/pages/product/product"
				})
			}
			if(i==3){
				uni.navigateTo({
					url:"/pages/profile/profile"
				})
			}
			if(i==4){
				uni.navigateTo({
					url:"/pages/carts/carts"
				})
			}
      if (i==5){
         //消息列表
          uni.navigateTo({
            url: "/pages/index/messageList"
          })
      }
      if (i==6){
        //
        uni.navigateTo({
          url: "/pages/index/binding?scene=1780484570188832769"
        })
      }
      if (i==7){
        //消息列表
        this.show = true
      }
		},
    confirm() {
      uni.$u.toast('已切换为业务员')
      uni.setStorageSync('tabBarRole', 1)
      uni.setStorageSync('tabBarList', tabBar[this.userType])
      this.refreshLoad()
      // this.$forceUpdate();
      //绑定确认
      this.show = false
    },
    cancel(){
      uni.$u.toast('已切换为普通用户')
      uni.setStorageSync('tabBarRole', 0)
      if (this.financeFlag){
        uni.setStorageSync('tabBarList', tabBar[1])
      }else {
        uni.setStorageSync('tabBarRole', 0)
      }
      this.refreshLoad()
      this.show = false
    },
    close(){
      this.show = false
    },
    refreshLoad(){
      uni.reLaunch({
        url:'/pages/index/index',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
	padding: 24rpx;
	background-color: #fff;

  // 未登录状态样式
  .not-login {
    margin: 20rpx 0;
    .login-item {
      background-color: #4080FF;
      border-radius: 16rpx;
      padding: 60rpx;
      display: flex;
      align-items: center;
      position: relative;

      .avatar-box {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;

        .default-avatar {
          width: 50rpx;
          height: 50rpx;
        }
      }

      .login-text {
        color: #fff;
        font-size: 32rpx;
      }

      .arrow {
        position: absolute;
        right: 30rpx;
        color: #fff;
        font-size: 32rpx;
      }
    }
  }

	.userInfo{
		padding: 20rpx 0;
		.userPic{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.userMess{
			width: 350rpx;
			height: 100rpx;
			.nicknames{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.right{
			width: 200rpx;
			line-height: 60rpx;
			//border: 1px solid #dddddd;
			//border-radius: 40rpx;
       .f1{
         border-bottom: 1px solid #dadada;
         text-align: center;
         color: #3F51B5;
         font-weight: bold;
       }
       .f2{
         text-align: center;
         font-weight: bold;
       }
		}
	}
	.menu{
		height: 100rpx;
		border-radius: 10rpx;
		padding: 20rpx 60rpx;
		margin: 20rpx 0;
		.icon{
			width: 70rpx;
			height: 70rpx;
		}
	}
  .s-img{
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    margin-top: 7px;
  }
	.menu1{
		//background: linear-gradient(236deg, #ffe4db 0%, #fffbf9 100%);
    background: linear-gradient(236deg, #f7450a 0%, #f1dfd6 100%);
	}
	.menu2{
		background: linear-gradient(244deg, #b163f1 0%, #fdf9ff 100%);
	}
	.menu3{
		background: linear-gradient(252deg, #ced1ef 0%, #f6f7ff 100%);
	}
  .menu5{
    background: linear-gradient(236deg, #FFC107 0%, #bdf7c0 100%);
  }
  .see{
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    right: 90rpx;
  }
  .number{
    color: #F44336;
    font-weight: bold;
    margin-left: 20px;
    position: absolute;
    margin-top: -17px;
  }
}
</style>
